<template>
  <div class="container-fluid">
    <div class="row trhe-height">
      <div class="col">题目名</div>
      <div :style="{ width: '336px' }">标签</div>
      <div :style="{ width: '126px' }" class="text-right">难度</div>
    </div>
    <router-link custom v-slot="{ navigate }" :to="{ name: getname, params: { ID: v.ID } }"
      v-for="(v, k) in getquestion.slice(0, 5)" :key="v.ID">
      <div class="trhe row cu" @click="navigate">
        <div class="col text-truncate ">{{ v.name }}</div>
        <div :style="{ width: '336px' }">
          <el-button type="primary" plain size="small" v-for="(vo, keys) in questionlabel(k).slice(0, 2)"
            v-text="getlabel.find(e => e.ID === vo.labelid)?.name" :key="`1-${keys}`"></el-button>
        </div>
        <div style="width: 126px" class="text-right">{{ DATAdifficulty[v.difficulty] }}</div>
      </div>
    </router-link>

  </div>
</template>

<script setup lang="ts">
import { Storekey } from "../../interface";
import Studycodemodel from "../../mysql_interface/studycodemodel";
import { computed } from "vue";
import { useStore } from "vuex";
import { DATAdifficulty } from "../../index/data/data";
const prop = defineProps<{
  question: Studycodemodel.Iquestion[] | Studycodemodel.Iquestionbank[]
  path1: string,

}>()

const store = useStore(Storekey)

const getlabel = computed(() => {
  return store.state.label?.rows || []
})

const getquestion = computed(() => {
  return prop.question
})

const getname = computed(() => {
  return prop.path1
})



function questionlabel(k: number) {
  const e = prop.question[k]
  if ('questionlabel' in e) {
    return e.questionlabel || []
  }
  if ('questionbanklabel' in e) {
    return e.questionbanklabel || []
  }
  return []
}

</script>

<style scoped>
.container-fluid {
  --bs-gutter-x: 12px;

}

.btn {
  margin-right: 3px;
}

tbody,
div,
tfoot,
th,
thead,
tr {
  border-style: none;
}

.btn-sm {
  font-size: 12px;
}

.trhe {
  height: 48px;
  line-height: 46px;
  margin: 6px;
  overflow: hidden;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 2px;
}

.trhe:hover {
  background-color: var(--color-f5);
  color: var(--color-cheng);
}


.btn-cheng {
  color: #fff;
  background-color: var(--color-cheng);
  border-color: var(--color-cheng);
}

.trhe-height {
  height: 60px;
  line-height: 48px;
  padding: 6px 12px;
  color: rgba(0, 0, 0, 0.9);
  font-weight: 700;
  font-size: 14px;
}
</style>